import { FC, useContext, useState } from 'react';

import { Button, Select, Tabs, Table } from 'antd';
import { courseMock } from './mock';
import { endDrag, beginDrag, sourceCollect } from '@/utils';
import { DesignProvider, DesignRedux } from '../../DesignRedux';
import styles from './index.less';
import { DragSource } from 'react-dnd';

import DragBox from '../../DragBox';

const { Option } = Select;
const { TabPane } = Tabs;

// todo 写一套样式
const CourseFC: FC<any> = (props: any) => {
  const { property, isDragging, connectDragSource } = props;
  const { dispatch } = useContext(DesignRedux);
  const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(
    'checkbox',
  );

  const columns = [
    {
      title: '课程名称',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '课 时',
      dataIndex: 'classHour',
      key: 'classHour',
    },
    {
      title: '老师',
      dataIndex: 'teacher',
      key: 'teacher',
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
    },
    {
      title: '试听',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '详情',
      dataIndex: 'action',
      key: 'action',
    },
  ];

  function callback(key) {
    console.log(key);
  }

  function onclickCourse() {
    dispatch({ rightEleProperty: property });
  }

  const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },

    getCheckboxProps: (record: any) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

  function rendTab(dataSource: any, index: number) {
    return (
      <Table
        key={index.toString()}
        rowKey={(record) => record.id}
        style={{ marginTop: 20 }}
        dataSource={dataSource}
        columns={columns}
        pagination={false}
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
      />
    );
  }

  // 价格计算
  return (
    <div ref={connectDragSource} onClick={onclickCourse}>
      <DragBox property={property}>
        {/*tab*/}
        <div className={styles.ztCourse}>
          {/*<div className={styles.courseContent}>*/}
          {/*</div>*/}
          <Tabs defaultActiveKey="1" onChange={callback}>
            {courseMock &&
              courseMock.map((item: object, index: number) => {
                return (
                  <TabPane
                    key={item.id}
                    tab={item.title}
                    tabBarStyle={{
                      background: '#fffcf4',
                    }}
                  >
                    {/* 联报方案*/}
                    <div className={styles.saleContent}>
                      <div className={styles.saleContentLeft}>联报方案</div>
                      <div className={styles.saleContentRight}>
                        <div className={styles.salePart}>两科联报减2000</div>
                        <div className={styles.salePart}>三科联报减2500</div>
                      </div>
                    </div>

                    <div className={styles.featureContent}>
                      <div className={styles.featureContentLeft}>班型特色</div>
                      <div className={styles.featureContentRight}>
                        {item.feature}
                      </div>
                    </div>

                    {rendTab(item.courseList, index)}
                  </TabPane>
                );
              })}
          </Tabs>
        </div>
      </DragBox>
    </div>
  );
};

const Course = DragSource(
  'box',
  {
    beginDrag, // 开始拖动
    endDrag, // 拖动完成
  },
  (connect: any, monitor: any) => sourceCollect(connect, monitor),
)(CourseFC);

export default Course;
